<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h3 id="title">封装模拟 jQuery </h3>
        <ul class="list">
            <li>item_01</li>
            <li>item_02</li>
            <li>item_03</li>
            <li>item_04</li>
            <li>item_05</li>
            <li>item_06</li>
            <li>item_07</li>
            <li>item_08</li>
            <li>item_09</li>
            <li>item_10</li>
        </ul>
        <p>
            <input type="text" class="inp" value="Are you oK....">
        </p>
    </div>

    <script>
        // jquery 通过原生JS封装的操作DOM 的 一个 JS框架   模拟DOM操作(增删改查)

        // 面向过程
        // 获取元素对象
        // 单个元素 直接操作
        // var h3 = document.getElementById("title");
        // h3.innerHTML = "hello world";

        // 多个元素 
        // var lilist = document.querySelectorAll("li");
        // for(var i=0;i<lilist.length;i++){
        //     var ele = lilist[i];
        //     ele.innerHTML = "hello wuhan2107"
        // }

        // var lilist = document.querySelectorAll("li");
        // function setHtml(index,text){   // text 表示需要修改的值
        //     for(var i=0;i<lilist.length;i++){
        //         var ele = lilist[i];
        //         if(i==index){
        //             ele.innerHTML = text 
        //         }
        //     }
        // }
        // setHtml(2,"abc123123123")

        // // 查找元素 
        // function getDom(index){
        //     var lilist = document.querySelectorAll("li");
        //     if(!index){
        //         return lilist[0]   // jquery 查找元素 默认都是找第一个 
        //     }
        //     var dom = [];   //  document.querySelectorAll  jquery是把查出来的元素放到一个数组 
        //     lilist.forEach((item,i)=>{
        //         if(i==index){
        //             dom.push(lilist[index]);  
        //         }
        //     })
        //     return dom;
        // }

        // var dom2 = getDom(2);
        // console.log(dom2)


        // $().html().text().eq().find().attr()
        // $.text()
        // $.val()
        // $ ==> jquery 
        // 面向对象
        
        // 单例模式 
        function GetEle(selector){
            this.eles = document.querySelectorAll(selector)
        }

        GetEle.prototype.html = function(text){
            if(arguments.length>= 1){   // 有参数 
                for(var i=0;i<this.eles.length;i++){
                    var ele = this.eles[i];
                    ele.innerHTML = text;
                }
            }else{
                // 没有传参数  
                return this.eles[0].innerHTML;
            }
        }
        GetEle.prototype.text = function(arg){
            if(arguments.length>= 1){   // 有参数 
                for(var i=0;i<this.eles.length;i++){
                    var ele = this.eles[i];
                    ele.textContent = arg;
                }
            }else{
                // 没有传参数  
                return this.eles[0].textContent;
            }
        }
        GetEle.prototype.val = function(value){
            if(arguments.length>= 1){   // 有参数 
                for(var i=0;i<this.eles.length;i++){
                    var ele = this.eles[i];
                    ele.value = value;
                }
            }else{
                // 没有传参数  
                return this.eles[0].value 
            }
        }
        GetEle.prototype.hide = function(){
            // this ==> GetEle => 实例化的对象 
            for(var i=0;i<this.eles.length;i++){
                var ele = this.eles[i];
                ele.style.display = 'none';
            }
        }
        GetEle.prototype.show = function(){
            // this ==> GetEle => 实例化的对象 
            for(var i=0;i<this.eles.length;i++){
                var ele = this.eles[i];
                ele.style.display = 'block';
            }
        }

        // 循环实例化对象中的集合 this.eles  每次循环时候传入 回调函数 
        GetEle.prototype.each = function(fn){  // fn 传入一个函数 
            for(var i=0;i<this.eles.length;i++){
                var item = this.eles[i];
                var index = i;
                // fn.call();
                // fn(item,index);

                // fn.call(this,arg1,arg2,arg3)  call 改变this的指向 
                fn.call(this,item,index,this.eles);

                // fn.call(this,index,item,this.eles);
                // 注意  jquery each 第一个参数是下表 第二个才是当前循环的元素

            }
        }



        // 对 GetEle 二次封装  模仿jquery 快速创建一个实例化对象  
        function $(selector){
            return new GetEle(selector)
        }
        // hide show 
        // $(".list li")  ==> 实例化对象 

        // $(".list li").html('zkl-zkl')
        // $(".inp").val("hello - hello - wuhan")

        $(".list li").each((item,index,list)=>{
            console.log(item)
            console.log(index)
            console.log(list)
        })

        
    </script>
    
    
</body>
</html>